import { Control, ControlProps } from '../common';
import { siteMap } from '../../user/siteMap';
import { ShoppingService } from '../../user/services/shoppingService';
import React = require('react');
import { ShoppingCartService } from 'user/services/shoppingCartService';
import { MemberService } from 'user/services/memberService';

export interface Props extends ControlProps<ShoppingCartBarControl> {

}

export interface State {
    totalCount: number
    totalPrice: number
}


export default class ShoppingCartBarControl extends Control<Props, State>{
    shoppingcartService: ShoppingCartService;
    shoppingCartService: ShoppingCartService;
    memberService: MemberService;
    shoppingService: ShoppingService;
    constructor(props) {
        super(props);
        this.hasCSS = true;
        this.shoppingcartService = this.elementPage.createService(ShoppingCartService);

        this.state = {
            totalCount: this.shoppingcartService.selectedCount,
            totalPrice: this.shoppingcartService.selectedPrice
        }

        this.shoppingCartService = this.elementPage.createService(ShoppingCartService);
        this.memberService = this.elementPage.createService(MemberService);
        this.shoppingService = this.elementPage.createService(ShoppingService);
    }

    async buy() {
        if (this.shoppingCartService.selectedCount <= 0)
            return;

        var items = await this.shoppingCartService.items();
        items = items.filter(o => o.Selected);

        var productIds = items.map(o => o.ProductId);
        var quantities = items.map(o => o.Count);
        let userInfo = await this.memberService.userInfo();
        let memberName = userInfo.Mobile || '';
        let order = await this.shoppingService.createOrder(memberName, productIds, quantities);
        // this.shoppingCartService.removeItems(items.map(o => o.Id));
        this.app.redirect(siteMap.nodes.shopping_orderProducts, { id: order.Id });

        return order;
    }

    get hasEditor() {
        return false;
    }

    get persistentMembers(): (keyof State)[] {
        return null;
    }

    componentDidMount() {
        this.shoppingcartService.onChanged(this, (items) => {
            let totalCount = 0;
            let totalPrice = 0;
            items.filter(o => o.Selected).forEach(o => {
                totalCount = totalCount + o.Count;
                totalPrice = totalPrice + o.Price * o.Count;
            });
            this.setState({ totalCount, totalPrice })
        })
    }

    _render() {
        let { totalCount, totalPrice } = this.state;
        return (
            <div className="settlement">
                <div className="pull-left btn-link"
                    onClick={() => this.app.redirect(siteMap.nodes.shopping_shoppingCart)}>
                    <i className="icon-shopping-cart"></i>
                    <span className="badge bg-primary" style={{ display: totalCount ? null : "none" }}>{totalCount}</span>
                </div>
                <div className="pull-right">
                    <label>总计：<span className="price">￥{totalPrice.toFixed(2)}</span></label>
                    <button className="btn btn-primary" disabled={totalCount <= 0}
                        onClick={() => this.buy()}>结算</button></div>
            </div>
        );
    }
}